<template>
  <div id="app" :style="getAppStyle">

      
       
    <keep-alive>
      <router-view v-if='$route.meta.keepAlive' class="body" />
    </keep-alive>
 
	 <router-view v-if='!$route.meta.keepAlive' class="body" />

      <!-- 全局组件 -->
      <Components /> 
     

   
  </div>
</template>
<script>
import axios from 'axios'
import {mapActions,mapState}  from 'vuex'
import {location} from '@/common/location' //获取位置
import computer from '@/common/info'
import Components from './components/Components.vue'
import Scroll from '@/common/scroll'
import common from "@/common/global"



export default {
  components: { Components },
  computed:{
   ...mapState('Setting',['SettingState','Subject','Navigation','Article']),//设置状态 主题数据 导航条样式数据 文章样式数据
     getAppStyle(){
         console.log('样式发生变化     --APP.Vue')
         console.log(this.Subject)
         return{
            '--GeneralBackColor':this.Subject.GeneralBackColor,
            '--GeneralBackColor-half':this.Subject.GeneralBackColorHalf ,
            '--BackColor':this.Subject.BackColor,
            '--Opacity':this.Article.Opacity/100 ,
            '--Pattern':this.Subject.Pattern ,
             '--BoxShadow':this.Subject.BoxShadow ,

            '--fontColor':this.Subject.fontColor,

            '--NavigationBackColor':this.Navigation.BackColor || 'steelblue',
            '--NavigationOpacity':this.Navigation.Opacity/100 ,

             '--ArticleBackColor':this.Article.BackColor || 'steelblue',
            '--ArticleOpacity':this.Article.Opacity/100 
         }
     },
  },
  methods:{
    ...mapActions('Init',['checkToken','initBlog']), 

    async init(){
        let scroll =new  Scroll()
        scroll.star() //滚动事件

        this.checkToken() //检测token是否失效
        this.initBlog()//初始化博客信息

        computer.getComputerInfo() //获取电脑信息
        let res =await location.getlocation() //获取位置信息

        if(res.messgae!='Success')   this.$message.warning('位置信息:'+res.messgae)



    },
  },
  mounted() {
     this.init()
  },
 created() {
      window.addEventListener('beforeunload', e =>{
        let from = document.documentElement.scrollTop || 0
         this.$public.Move(from,0,10)
      });
},



}
</script>


<style src="@/common/css/animation.css"></style>
<style src="@/common/css/default.css"></style>
<style src="@/common/css/variable.css"></style>
<style src="@/common/css/media.css"></style>
<style src="@/common/css/global.css"></style>
<style src="@/common/css/global.less" lang="less"></style>
<style src="@/common/css/markdown.less" lang="less"></style>
<style src="@/common/css/color.css"></style>
<style src="@/common/css/el.less" lang="less"></style>
<style lang="less" >
*{
  font-family: var(--fontFamily);
}


.body{ margin-top: 70px;}

.headphoto{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid lightgray;
}

.TextCenter{
  width: 100%;
  text-align: center;
}


</style>
